<script setup lang="ts">
import {
  ref,
  onMounted,
  getCurrentInstance,
} from 'vue'

/*
* 演出轮播图（测试成功）
*
* */
/*const swiperList = [
    {
    "id": "11",
    "url": "http://localhost/performance/slideshow/1.png"
    },
    {
      "id": "12",
      "url": "http://localhost/performance/slideshow/2.png"
    }
    /!*,
    {
      "id": "0003",
      "url": "http://localhost/qunar/swiper/d7bbc21db442366a882e04ddc984669a.jpg_750x200_85e640d9.jpg"
    }*!/
    ]*/

const global = getCurrentInstance().appContext.config.globalProperties;

// 存储所有演出信息（改为数组，因为要存多个结果）
const performancesList = ref<Array<{
  pid: number;
  pname: string;
  rurl: string;
  purl: string;
  pdetail: string;
  pprice: string;
  ptime: string;
  plocation: string;
  performanceType: number;
  recommendType: number;
}>>([]);

const  type=-1;
  //访问后端
onMounted(() => {
  // 用反引号（`）代替单引号（'），才能解析${query.id}!!!!!!
  global.$http.get(`/public/maoyanmovieproject/queryPerformanceByType/${type}`)
      .then(resp => {
        console.log("获取到的演出数据:", resp.data);
        // 修复2：将数据赋值给正确的ref变量
        performancesList.value = resp.data;
      }).catch(err => {
    console.error('获取演出信息失败:', err);
  })
});
</script>

<template>
      <el-carousel arrow="always" height="70px">
        <el-carousel-item v-for="item in performancesList" :key="item.pid">
          <!--  点击图片可以跳转到演出详情页面  -->
          <router-link :to="{name:'performance-detail',query:{id:item.pid}}">
          <el-image :src="item.purl"></el-image>
          </router-link>
        </el-carousel-item>
      </el-carousel>

</template>

<style scoped>
/*轮播图整体样式*/
/*.box{
  display: flex;                  !* 盒子元素以弹性盒子的方式布局，默认是横向排列 *!
  flex-direction: row;            !* 盒子元素横列（默认），主轴就是 X 轴 *!
  justify-content: center;  !* 盒子元素 在主轴上的对齐，元素间的空白空间均匀分配 *!
  align-items: center;            !* 盒子元素 在交叉轴上的对齐 *!
  !*text-align: center; !* 文本/图片水平居中 *!
  padding: 20px;*!
}*/
.swiper-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.carousel-item {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*border-radius: 8px;
  overflow: hidden;
  display: inline-block; !* 让轮播项适应内容宽度 *!*/
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
 /* width: auto;
  height: auto;*/
}

.el-carousel__item {
  border-radius: 8px;
  overflow: hidden;
}

</style>
